<template>
  <div class="page-mobile-regist">
    <div class="logo">
      <img @click="$router.push('/m')" :src="web_info.SUB_LOGO" alt="" />
    </div>
    <div class="login-type">
      <div :class="['account']">用户注册</div>
    </div>
    <div class="login-box">
      <div class="box-item" v-if="web_info.VERIFY_TYPE == 1">
        <input
          type="text"
          class="input-box"
          placeholder="请输入您的手机号"
          v-model="param.mobile"
        />
        <img class="phone-icon" src="/img/mobile/sign_phone.png" alt="" />
        <div class="tips">
          <span v-show="rules.mobile">手机号不能为空</span>
          <span v-show="rules.mobileMatch">手机号不正确</span>
        </div>
      </div>
      <div class="box-item" v-if="web_info.VERIFY_TYPE == 0">
        <input
          type="text"
          class="input-box"
          placeholder="请输入您的邮箱"
          v-model="param.email"
        />
        <img class="phone-icon" src="/img/mobile/sign_email.png" alt="" />
        <div class="tips">
          <span v-show="rules.email">邮箱不能为空</span>
          <span v-show="rules.emailMatch">邮箱不正确</span>
        </div>
      </div>
      <div class="box-item">
        <input
          type="password"
          class="input-box"
          placeholder="请输入您的密码"
          v-model="param.password"
        />
        <img class="phone-icon" src="/img/mobile/sign_lock.png" alt="" />
        <div class="tips">
          <span v-show="rules.password">密码不能为空</span>
          <span v-show="rules.passwordMatch">密码不正确</span>
        </div>
      </div>
   <!--   <div class="box-code" v-if="web_info.VERIFY_TYPE == 1">
        <div class="code-left">
          <input
            type="text"
            class="code"
            placeholder="请输入验证码"
            v-model="param.code"
          />
          <div class="tips">
            <span v-show="rules.code">验证码不能为空</span>
            <span v-show="rules.codeMatch">验证码不正确</span>
          </div>
        </div>
        <div class="code-right">
          <div
            class="get-code"
            v-show="!rules.mobileCode"
            @click="sendPhoneCode"
          >
            获取验证码
          </div>
          <div class="set-time" v-show="rules.mobileCode">
            已发送{{ seconds }}
          </div>
        </div>
      </div> -->
      <!-- <div class="box-code" v-if="web_info.VERIFY_TYPE == 0">
        <div class="code-left">
          <input
            type="text"
            class="code"
            placeholder="请输入验证码"
            v-model="param.code"
          />
          <div class="tips">
            <span v-show="rules.code">验证码不能为空</span>
            <span v-show="rules.codeMatch">验证码不正确</span>
          </div>
        </div>
        <div class="code-right">
          <div
            class="get-code"
            v-show="!rules.emailCode"
            @click="sendEmailCode"
          >
            获取验证码
          </div>
          <div class="set-time" v-show="rules.emailCode">
            已发送{{ seconds }}
          </div>
        </div>
      </div> -->
      <!-- <div class="box-code" v-if="kl_md.KLTDFX == 1 && !inviteCode && !classCoding">
        <div class="code-left">
          <input
            type="text"
            class="code"
            placeholder="请输入邀请码"
            v-model="param.inviteCode"
          />
          <div class="tips">
            <span v-show="rules.code">验证码不能为空</span>
            <span v-show="rules.codeMatch">验证码不正确</span>
          </div>
        </div>
        <div class="code-right">
          <div
            class="get-code"
            v-show="!rules.emailCode"
            @click="sendEmailCode"
          >
            获取验证码
          </div>
          <div class="set-time" v-show="rules.emailCode">
            已发送{{ seconds }}
          </div>
        </div>
      </div> -->

      <!-- v-model="param.inviteCode"
          :label="'邀请码'"
          :placeholder="'请输入邀请码（可选）'"
          v-if="kl_md.KLTDFX == 1 && !inviteCode" -->
    </div>
    <div class="login-btn" @click="onSubmit">注册</div>
    <div class="user-read">
      <!-- 您需要同意相关条款才能注册 -->
      <van-checkbox
        v-model="checked"
        icon-size="16px"
        style="margin-right:.1rem"
      ></van-checkbox>
      我同意《<nuxt-link to="/m/protocol">用户协议</nuxt-link>》《<nuxt-link
        to="/m/privacy-policy"
        >隐私保护指引</nuxt-link
      >》
      <!-- <img src="/img/mobile/login-dui.png" alt="">
      注册即代表同意《<nuxt-link to="/m/protocol">用户协议</nuxt-link
      >》《<nuxt-link to="/m/privacy-policy">隐私保护指引</nuxt-link>》 -->
    </div>
    <div class="signin">
      <div>已有账号？<nuxt-link to="/m/login">点击登录</nuxt-link></div>
      <div><nuxt-link to="/m">回到首页</nuxt-link></div>
    </div>
  </div>
</template>

<script>
import {
  getEmailCode,
  userRegist,
  userLogin,
  getSmsCode
} from "~/api/account/user.js";
import { mapMutations, mapState, mapActions } from "vuex";
import { strToHexCharCode, hexCharCodeToStr } from "~/utils/commonfun";
export default {
  components: {},
  data() {
    return {
      checked: false,
      param: {
        email: "",
        password: "",
        _password: "",
        mobile: "",
        code: "",
        inviteCode: ""
      },
      interval: null,
      seconds: 60,
      respond_code: new RegExp(""),
      rules: {
        mobile: false,
        mobileMatch: false,
        mobileCode: false,
        email: false,
        emailMatch: false,
        emailCode: false,
        password: false,
        passwordMatch: false,
        code: false,
        codeMatch: false
      }
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      token(state) {
        return state.token;
      },
      web_info(state) {
        return state.web_info;
      },
      kl_md(state) {
        return state.kl_md;
      }
    }),
    password_rule() {
      return new RegExp(this.param.password);
    },
    //团队分销邀请码
    inviteCode() {
      return this.$route.query.inviteCode;
    },
    // 班级邀请码
    classCoding() {
      return this.$route.query.coding;
    },
  },
  watch: {},
  methods: {
    ...mapMutations([
      "SET_IS_LOADING",
      "SET_TOKEN",
      "SET_USERINFO",
      "SET_LOGINTYPE"
    ]),
    ...mapActions([
      "initBuyRecord",
      "initBuyCourseRecord",
      "initRtcInfo",
      "initAuthentication",
      "getMineV2QuestionBankList"
    ]),
    onSubmit() {
      // 判断是否邮箱注册
      if (this.web_info.VERIFY_TYPE == 0) {
        // 验证邮箱
        if (this.param.email == "") {
          this.rules.email = true;
          this.rules.emailMatch = false;
          return false;
        } else {
          this.rules.email = false;
        }
        if (
          !/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(
            this.param.email
          )
        ) {
          this.rules.emailMatch = true;
          this.rules.email = false;
          return false;
        } else {
          this.rules.emailMatch = false;
        }
      } else {
        //验证手机
        if (this.param.mobile == "") {
          this.rules.mobile = true;
          this.rules.mobileMatch = false;
          return false;
        } else {
          this.rules.mobile = false;
        }
        if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.param.mobile)) {
          this.rules.mobileMatch = true;
          this.rules.mobile = false;
          return false;
        } else {
          this.rules.mobileMatch = false;
        }
      }
      // 验证密码
      if (this.param.password == "") {
        this.rules.password = true;
        this.rules.passwordMatch = false;
        return false;
      } else {
        this.rules.password = false;
      }
      if (!/^[\d_a-zA-Z_,.!@$^&%*-=+`~?:;]{6,16}$/.test(this.param.password)) {
        this.rules.passwordMatch = true;
        this.rules.password = false;
        return false;
      } else {
        this.rules.passwordMatch = false;
      }
      // 验证验证码
      // if (this.param.code == "") {
      //   this.rules.code = true;
      //   this.rules.codeMatch = false;
      //   return false;
      // } else {
      //   this.rules.code = false;
      // }
      // if (!this.respond_code.test(this.param.code)) {
      //   this.rules.codeMatch = true;
      //   this.rules.code = false;
      //   return false;
      // } else {
      //   this.rules.codeMatch = false;
      // }
      //判断未勾选隐私协议按钮
      if (!this.checked) {
        this.$toast("您需要同意相关条款才能注册");
        return false;
      }
      this.SET_IS_LOADING(true);
      let fatherId = 0;
      if (this.$route.query.fatherId) {
        fatherId = this.$route.query.fatherId;
      }
      const { email, password, mobile, inviteCode } = this.param;
      let params = {
        email,
        password,
        mobile,
        fatherId,
        ip: returnCitySN.cip
      };
      if (inviteCode) {
        params = {
          ...params,
          inviteCode
        };
      }
      if (this.classCoding) {
        params = {
          ...params,
          coding:this.classCoding
        }
      }
      userRegist(params).then(async res => {
        if (res && res.data && res.data.code == 200) {
          this.SET_IS_LOADING(false);
          if(this.classCoding){
            this.$toast("注册成功！");
            this.$router.replace("/m/login");
            return;
          }
          let result = await this.handleLogin();
          if (result === "success") {
            this.$toast(this.$t("locale.mobile.regist.t32"));
            this.initState();
            this.$router.replace("/m");
          } else {
            this.$toast(this.$t("locale.mobile.regist.t33"));
          }
        } else {
          this.SET_IS_LOADING(false);
          let msg = res && res.data && res.data.msg;
          this.$toast(this.$t("locale.mobile.regist.t34") + msg);
        }
      });
    },
    handleLogin() {
      return new Promise(async (res, rej) => {
        let param = {
          password: this.param.password
        };
        if (this.web_info.VERIFY_TYPE == 1) {
          param = {
            ...param,
            account: this.param.mobile
          };
        } else if (this.web_info.VERIFY_TYPE == 0) {
          param = {
            ...param,
            email: this.param.email
          };
        }
        let result = await userLogin(param);
        if (result && result.data && result.data.code === 200) {
          this.SET_TOKEN(result.headers.authorization);
          this.SET_USERINFO(result.data.data);
          if (this.web_info.VERIFY_TYPE == 1) {
            this.SET_LOGINTYPE("mobile");
          } else if (this.web_info.VERIFY_TYPE == 0) {
            this.SET_LOGINTYPE("email");
          }
          this.initBuyRecord();
          this.initRtcInfo();
          this.initBuyCourseRecord();
          this.initAuthentication();
          this.getMineV2QuestionBankList();

          res("success");
        } else {
          rej(result.data.msg);
        }
      }).catch(e => {
        if (e) {
          this.SET_IS_LOADING(false);
        }
      });
    },
    sendEmailCode() {
      if (this.param.email == "") {
        this.rules.email = true;
        this.rules.emailMatch = false;
        return false;
      } else {
        this.rules.email = false;
      }
      if (
        !/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(
          this.param.email
        )
      ) {
        this.rules.emailMatch = true;
        this.rules.email = false;
        return false;
      } else {
        this.rules.emailMatch = false;
      }
      this.rules.emailCode = true;
      getEmailCode({
        to: this.param.email
      }).then(result => {
        if (result && result.data && result.data.code == 200) {
          this.respond_code = new RegExp(
            hexCharCodeToStr(result.data.data.code)
          );
          this.seconds = 60;
          this.cuntDown();
        } else {
          this.$notify({
            type: "danger",
            message: $t("locale.mobile.regist.t35")
          });
        }
      });
    },
    sendPhoneCode() {
      if (this.param.mobile == "") {
        this.rules.mobile = true;
        this.rules.mobileMatch = false;
        return false;
      } else {
        this.rules.mobile = false;
      }
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.param.mobile)) {
        this.rules.mobileMatch = true;
        this.rules.mobile = false;
        return false;
      } else {
        this.rules.mobileMatch = false;
      }
      this.rules.mobileCode = true;
      getSmsCode({
        number: this.param.mobile
      }).then(result => {
        if (result && result.data && result.data.code == 200) {
          this.respond_code = new RegExp(
            hexCharCodeToStr(result.data.data.RequestId)
          );
          this.seconds = 60;
          this.cuntDown();
        } else {
          this.$notify({
            type: "danger",
            message: $t("locale.mobile.regist.t35")
          });
        }
      });
    },
    cuntDown() {
      this.interval = setInterval(() => {
        this.seconds--;
        if (this.seconds <= 0) {
          this.seconds = 0;
          this.rules.mobileCode = false;
          this.rules.emailCode = false;
          clearInterval(this.interval);
        }
      }, 1000);
    },
    initState() {
      this.param = {
        email: "",
        password: "",
        _password: "",
        mobile: "",
        code: ""
      };
      this.interval = null;
      this.seconds = 0;
      this.respond_code = new RegExp("");
    }
  },
  created() {
    if (process.client) {
      if (this.token && Object.keys(this.user_info).length > 0) {
        this.$router.replace("/m");
        return;
      }
      //扫码进入记录邀请码
      if (this.inviteCode) {
        this.param = {
          ...this.param,
          inviteCode: this.inviteCode
        };
      }
    }
  },
  activated() {
    if (process.client) {
      if (this.token && Object.keys(this.user_info).length > 0) {
        this.$router.replace("/m");
      }
      //扫码进入记录邀请码
      if (this.inviteCode) {
        this.param = {
          ...this.param,
          inviteCode: this.inviteCode
        };
      }
    }
  },
  deactivated() {
    this.initState();
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.page-mobile-regist {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-top: 1rem;
  .logo {
    width: 1.536rem;
    height: 1.536rem;
    margin: 0rem auto;
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .login-type {
    width: 5.568rem;
    margin: 0.6rem auto;
    display: flex;
    justify-content: center;
    font-size: 0.3264rem;
    font-weight: bold;
    .account {
      width: 2rem;
      text-align: center;
      color: #4a4b4d;
    }
    .account.active {
      color: var(--theme-color);
    }
    .line {
      margin: 0 0.2rem;
      color: #dadce0;
    }
    .code {
      width: 2rem;
      text-align: center;
      color: #adafb2;
    }
    .code.active {
      color: var(--theme-color);
    }
  }
  .login-box {
    width: 5.568rem;
    margin: 0.3rem auto;
    .box-item {
      width: 100%;
      height: 0.768rem;
      border-radius: 0.384rem;
      margin-bottom: 0.5rem;
      background: #ffffff;
      position: relative;
      &::after {
        content: "";
        display: block;
        position: absolute;
        left: 0.9rem;
        top: 50%;
        z-index: 9;
        transform: translateY(-50%);
        height: 0.3168rem;
        width: 0.03rem;
        background-color: #c6c8cc;
      }
      .tips {
        position: absolute;
        left: 1rem;
        bottom: -0.4rem;
        color: red;
        font-size: 0.22rem;
      }
      .phone-icon {
        position: absolute;
        left: 0.4rem;
        top: 50%;
        transform: translateY(-50%);
        height: 0.3168rem;
        width: 0.27456rem;
        display: block;
      }
      .input-box {
        width: 100%;
        box-sizing: border-box;
        padding-left: 1rem;
        height: 0.768rem;
        border-radius: 0.384rem;
        border: none;
        line-height: 0.768rem;
        font-size: 0.3rem;
      }
    }
    .box-code {
      margin-bottom: 0.5rem;
      display: flex;
      justify-content: space-between;
      .code-left {
        width: 56%;
        height: 0.768rem;
        border-radius: 0.384rem;
        background: #ffffff;
        position: relative;
        .code {
          width: 100%;
          box-sizing: border-box;
          padding: 0 0.3rem;
          height: 0.768rem;
          border-radius: 0.384rem;
          border: none;
          line-height: 0.768rem;
          font-size: 0.3rem;
        }
        .tips {
          position: absolute;
          left: 0.3rem;
          bottom: -0.4rem;
          color: red;
          font-size: 0.22rem;
        }
      }
      .code-right {
        width: 40%;
        .get-code {
          width: 100%;
          box-sizing: border-box;
          padding: 0 0.3rem;
          height: 0.768rem;
          text-align: center;
          border-radius: 0.384rem;
          line-height: 0.768rem;
          font-size: 0.3rem;
          background: var(--theme-color);
          color: #ffffff;
        }
        .set-time {
          width: 100%;
          box-sizing: border-box;
          padding: 0 0.3rem;
          height: 0.768rem;
          text-align: center;
          border-radius: 0.384rem;
          border: none;
          line-height: 0.768rem;
          font-size: 0.3rem;
          background: #dadce0;
        }
      }
    }
  }
  .login-btn {
    width: 5.568rem;
    margin: 0.7rem auto 0.3rem;
    height: 0.768rem;
    line-height: 0.768rem;
    border-radius: 0.384rem;
    text-align: center;
    font-size: 0.3rem;
    font-weight: bold;
    background: var(--theme-color);
    color: #ffffff;
  }
  .user-read {
    font-size: 0.24rem;
    width: 5.568rem;
    margin: 0rem auto;
    display: flex;
    align-items: center;
    img {
      display: block;
      width: 0.2496rem;
      height: 0.2496rem;
      margin-right: 0.1rem;
    }
    a {
      color: var(--theme-color);
    }
  }
  .signin {
    font-size: 0.24rem;
    width: 5.568rem;
    margin: 0.2rem auto;
    display: flex;
    justify-content: space-between;
    a {
      color: var(--theme-color);
    }
  }
  .van-dialog {
    .drag {
      height: 0.75rem;
      line-height: 0.71rem;
      .drag_bg {
        height: 0.75rem;
      }
      .drag_text {
        height: 0.75rem;
        font-size: 0.24rem;
      }
      .handler {
        width: 0.75rem;
        height: 0.75rem;
      }
    }
  }
}
</style>
